import React, { Component } from 'react'
import style from './address.module.scss'
import {back_icon} from '../../common/icon/svg'
import {connect} from "react-redux"
import {request} from "../../request/request"
 class Address extends Component {
    state={
        list:[]
    }
    //添加收货地址
    add=()=>{
        this.props.history.push("/add")
    }
    //编辑收货地址
    edit=(item)=>{
        this.props.history.push({pathname:"/add",state:{item}})
    }
    //删除用户的地址
    del=(item)=>{
        request({
            url:"/delAddress",
            method:"POST",
            data:{
                aid:item.aid
            }
        }).then(res=>{
            console.log(res);
            if(res.data.code==="01"){
                let {list} = this.state
                let arr = list.filter(ite=>{
                    return item.aid !== ite.aid
                })
                this.setState({
                    list:arr
                })
            }else{
                alert("删除报错")
            }
        })
    }
    componentDidMount(){
        let userList = localStorage.getItem("userList")
        if(!userList) return alert("请登录")
        //获取用户全部地址
        request({
            url:"/getAddress",
            method:"GET",
            params:{
                uid:JSON.parse(userList).uid
            }
        }).then(res=>{
            if(res.data.code==="01"){
                this.setState({
                    list:res.data.data
                })
            }else{
                alert("获取报错")
            }
        })
    }
    //获取用户地址
    getadd=(item)=>{
        localStorage.setItem("address",JSON.stringify(item))
        this.props.history.push("/close")
    }
    render() {
        console.log(this.props);
        return (
            <div className={style.address}>
                <div className={style.head}>
                    <span onClick={()=>this.props.history.push("/me")}>{back_icon}</span>
                    <span className={style.shou}>收货地址</span>
                </div>
                <div className={style.center}>
                    {
                        this.state.list.map((item,i)=>{
                            return (
                                <div key={i} className={style.list}>
                                    <div className={style.top} onClick={()=>this.getadd(item)}>
                                        <div className={style.user}><span className={style.name}>{item.name}</span><span className={style.ipone}>{item.ipone}</span></div>
                                        <div className={style.addMsg}>{item.city+""+item.detailed}</div>
                                    </div>
                                    <div className={style.bottom}>
                                        <div className={style["bottom-left"]}>
                                            {/* <span></span> */}
                                            <span className={style.mo}>
                                                {
                                                    item.isdefault?"默认地址":null
                                                }
                                            </span>
                                        </div>
                                        <div className={style["bottom-right"]}>
                                            <span></span>
                                            <span className={style.edit} onClick={()=>this.edit(item)} className={style.edit}>编辑</span>
                                            <span></span>
                                            <span  className={style.del} onClick={()=>this.del(item)}>删除</span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className={style.add} onClick={this.add}>
                    添加收货地址
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
    return {addressList:state.addressList};
}
const mapDispatchToProps= (dispatch)=>{
    return {
        getAddress:(user)=>{
            dispatch({type:"ADDRESS", data:user});
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Address)
